<template>
  <div class="user">
    <a-avatar class="avatar" shape="square" :size="32" src="https://profile-photo.s3.cn-north-1.amazonaws.com.cn/files/avatar/50660/MTAxMzIwNDk1NG9veWlxdnd2/avatar.png?v=dc264dc0617c9e4c56085fd62cdd76fe" />
  </div>
  <ul class="menu">
    <li class="menu-list task-list" @click="handleSelect(0)">
      <svg v-if="state.selectedMenu !== state.menuList[0]" t="1648535078263" class="icon" viewBox="0 0 1024 1024"
           xmlns="http://www.w3.org/2000/svg" p-id="2204" width="24" height="24"><path d="M224 800.256L223.712 224H320v31.68c0 35.456 28.64 64.32 63.872 64.32h256.256A64.16 64.16 0 0 0 704 255.68V224l96-0.256L800.256 800 224 800.256zM640 192.32L640.128 256 384 255.68V192.32L383.872 192 640 192.32zM799.84 160H695.04c-11.072-19.04-31.424-32-54.912-32h-256.256c-23.488 0-43.808 12.928-54.912 32H223.712A63.776 63.776 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V223.744A64 64 0 0 0 799.84 160z" p-id="2205" fill="#6f7175"></path><path d="M619.072 429.088l-151.744 165.888-62.112-69.6a32 32 0 1 0-47.744 42.624l85.696 96a32 32 0 0 0 23.68 10.688h0.192c8.96 0 17.536-3.776 23.616-10.4l175.648-192a32 32 0 0 0-47.232-43.2" p-id="2206" fill="#6f7175"></path></svg>
      <svg v-else t="1648535078263" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="2204" width="24" height="24"><path d="M224 800.256L223.712 224H320v31.68c0 35.456 28.64 64.32 63.872 64.32h256.256A64.16 64.16 0 0 0 704 255.68V224l96-0.256L800.256 800 224 800.256zM640 192.32L640.128 256 384 255.68V192.32L383.872 192 640 192.32zM799.84 160H695.04c-11.072-19.04-31.424-32-54.912-32h-256.256c-23.488 0-43.808 12.928-54.912 32H223.712A63.776 63.776 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V223.744A64 64 0 0 0 799.84 160z" p-id="2205" fill="#4772fa"></path><path d="M619.072 429.088l-151.744 165.888-62.112-69.6a32 32 0 1 0-47.744 42.624l85.696 96a32 32 0 0 0 23.68 10.688h0.192c8.96 0 17.536-3.776 23.616-10.4l175.648-192a32 32 0 0 0-47.232-43.2" p-id="2206" fill="#4772fa"></path></svg>
    </li>
    <li class="menu-list calendar" @click="handleSelect(1)">
      <svg v-if="state.selectedMenu !== state.menuList[1]" t="1648535972362" class="icon" viewBox="0 0 1024 1024"
           xmlns="http://www.w3.org/2000/svg" p-id="4523" width="20" height="20"><path d="M53.085678 141.319468C23.790257 141.319468 0 165.035326 0 194.34775L0 918.084273C0 947.295126 23.796789 971.112572 53.085678 971.112572L970.914322 971.112572C1000.209743 971.112572 1024 947.396696 1024 918.084273L1024 194.34775C1024 165.136896 1000.203211 141.319468 970.914322 141.319468L812.137931 141.319468 812.137931 88.275862C812.137931 68.774506 796.328942 52.965517 776.827586 52.965517 757.32623 52.965517 741.517241 68.774506 741.517241 88.275862L741.517241 211.940158 970.914322 211.940158C961.186763 211.940158 953.37931 204.125926 953.37931 194.34775L953.37931 918.084273C953.37931 908.344373 961.25643 900.491882 970.914322 900.491882L53.085678 900.491882C62.813237 900.491882 70.62069 908.306097 70.62069 918.084273L70.62069 194.34775C70.62069 204.087649 62.74357 211.940158 53.085678 211.940158L211.862069 211.940158 211.862069 141.319468 53.085678 141.319468ZM211.862069 141.319468 282.482759 141.319468 282.482759 88.275862C282.482759 68.774506 266.67377 52.965517 247.172414 52.965517 227.671058 52.965517 211.862069 68.774506 211.862069 88.275862L211.862069 141.319468ZM953.37931 317.871192 70.62069 317.871192 70.62069 388.491882 953.37931 388.491882 953.37931 317.871192ZM776.937913 582.62069C796.439287 582.62069 812.248258 566.811701 812.248258 547.310345 812.248258 527.808989 796.439287 512 776.937913 512L247.172414 512C227.671058 512 211.862069 527.808989 211.862069 547.310345 211.862069 566.811701 227.671058 582.62069 247.172414 582.62069L776.937913 582.62069ZM247.172414 688.551724C227.671058 688.551724 211.862069 704.360713 211.862069 723.862069 211.862069 743.363425 227.671058 759.172414 247.172414 759.172414L600.386189 759.172414C619.887563 759.172414 635.696534 743.363425 635.696534 723.862069 635.696534 704.360713 619.887563 688.551724 600.386189 688.551724L247.172414 688.551724ZM741.517241 211.940158 741.517241 247.328574C741.517241 266.829948 757.32623 282.638919 776.827586 282.638919 796.328942 282.638919 812.137931 266.829948 812.137931 247.328574L812.137931 141.319468 211.862069 141.319468 211.862069 211.940158 741.517241 211.940158ZM282.482759 211.940158 211.862069 211.940158 211.862069 247.328574C211.862069 266.829948 227.671058 282.638919 247.172414 282.638919 266.67377 282.638919 282.482759 266.829948 282.482759 247.328574L282.482759 211.940158Z" p-id="4524" fill="#6f7175"></path></svg>
      <svg v-else t="1648535972362" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4523" width="20" height="20"><path d="M53.085678 141.319468C23.790257 141.319468 0 165.035326 0 194.34775L0 918.084273C0 947.295126 23.796789 971.112572 53.085678 971.112572L970.914322 971.112572C1000.209743 971.112572 1024 947.396696 1024 918.084273L1024 194.34775C1024 165.136896 1000.203211 141.319468 970.914322 141.319468L812.137931 141.319468 812.137931 88.275862C812.137931 68.774506 796.328942 52.965517 776.827586 52.965517 757.32623 52.965517 741.517241 68.774506 741.517241 88.275862L741.517241 211.940158 970.914322 211.940158C961.186763 211.940158 953.37931 204.125926 953.37931 194.34775L953.37931 918.084273C953.37931 908.344373 961.25643 900.491882 970.914322 900.491882L53.085678 900.491882C62.813237 900.491882 70.62069 908.306097 70.62069 918.084273L70.62069 194.34775C70.62069 204.087649 62.74357 211.940158 53.085678 211.940158L211.862069 211.940158 211.862069 141.319468 53.085678 141.319468ZM211.862069 141.319468 282.482759 141.319468 282.482759 88.275862C282.482759 68.774506 266.67377 52.965517 247.172414 52.965517 227.671058 52.965517 211.862069 68.774506 211.862069 88.275862L211.862069 141.319468ZM953.37931 317.871192 70.62069 317.871192 70.62069 388.491882 953.37931 388.491882 953.37931 317.871192ZM776.937913 582.62069C796.439287 582.62069 812.248258 566.811701 812.248258 547.310345 812.248258 527.808989 796.439287 512 776.937913 512L247.172414 512C227.671058 512 211.862069 527.808989 211.862069 547.310345 211.862069 566.811701 227.671058 582.62069 247.172414 582.62069L776.937913 582.62069ZM247.172414 688.551724C227.671058 688.551724 211.862069 704.360713 211.862069 723.862069 211.862069 743.363425 227.671058 759.172414 247.172414 759.172414L600.386189 759.172414C619.887563 759.172414 635.696534 743.363425 635.696534 723.862069 635.696534 704.360713 619.887563 688.551724 600.386189 688.551724L247.172414 688.551724ZM741.517241 211.940158 741.517241 247.328574C741.517241 266.829948 757.32623 282.638919 776.827586 282.638919 796.328942 282.638919 812.137931 266.829948 812.137931 247.328574L812.137931 141.319468 211.862069 141.319468 211.862069 211.940158 741.517241 211.940158ZM282.482759 211.940158 211.862069 211.940158 211.862069 247.328574C211.862069 266.829948 227.671058 282.638919 247.172414 282.638919 266.67377 282.638919 282.482759 266.829948 282.482759 247.328574L282.482759 211.940158Z" p-id="4524" fill="#4772fa"></path></svg>
    </li>
    <li class="menu-list quadrant" @click="handleSelect(2)">
      <svg v-if="state.selectedMenu !== state.menuList[2]" t="1648536523341" class="icon" viewBox="0 0 1024 1024"
           xmlns="http://www.w3.org/2000/svg" p-id="4932" width="24" height="24"><path d="M727.6 483.6H538.5V294.5c0-41.1 12.3-80.3 35.5-113.3 21.6-30.7 51.6-54.8 86.7-69.7 33.9-14.4 70.4-19.1 105.6-13.7 37.9 5.8 73 23.5 101.5 51.1l2.7 2.7 2.7 2.7c27.6 28.5 45.3 63.6 51.1 101.5 5.4 35.1 0.7 71.7-13.7 105.6-14.9 35.1-39 65.1-69.7 86.7-33 23.3-72.2 35.5-113.3 35.5z m-145.1-44h145.1c32 0 62.4-9.5 88-27.4 24-16.9 42.9-40.4 54.5-67.9 11.2-26.4 14.9-54.6 10.7-81.7-4.5-29.3-17.7-55.4-39.2-77.6-0.7-0.7-1.4-1.5-2.2-2.2-0.7-0.7-1.5-1.4-2.2-2.2-22.2-21.5-48.4-34.7-77.6-39.2-27.1-4.2-55.3-0.5-81.7 10.7-27.5 11.7-51 30.5-67.9 54.5-18 25.5-27.4 55.9-27.4 88l-0.1 145zM484.2 483.6H295.1c-41.1 0-80.3-12.3-113.3-35.5-30.7-21.6-54.8-51.6-69.7-86.7C97.7 327.5 93 291 98.4 255.9c5.8-37.9 23.5-73 51.1-101.5l2.7-2.7 2.7-2.7c28.5-27.6 63.6-45.3 101.5-51.1 35.1-5.4 71.7-0.7 105.6 13.7 35.1 14.9 65.1 39 86.7 69.7 23.2 33 35.5 72.2 35.5 113.3v189zM285 139.7c-7.3 0-14.6 0.6-21.8 1.7-29.3 4.5-55.4 17.7-77.6 39.2-0.7 0.7-1.5 1.4-2.2 2.2l-2.2 2.2c-21.5 22.2-34.7 48.4-39.2 77.6-4.2 27.1-0.5 55.3 10.7 81.7 11.7 27.5 30.5 51 54.5 67.9 25.5 18 55.9 27.4 88 27.4h145.1V294.5c0-32-9.5-62.4-27.4-88-16.9-24-40.4-42.9-67.9-54.5-19.5-8.1-39.9-12.3-60-12.3zM285 925.9c-9.6 0-19.1-0.7-28.5-2.2-37.9-5.8-73-23.5-101.5-51.1l-2.7-2.7-2.7-2.7c-27.6-28.5-45.3-63.6-51.1-101.5-5.4-35.1-0.7-71.7 13.7-105.6 14.9-35.1 39-65.1 69.7-86.7 33-23.2 72.2-35.5 113.3-35.5h189.1V727c0 41.1-12.3 80.3-35.5 113.3-21.7 30.7-51.7 54.9-86.8 69.7-24.8 10.5-51 15.9-77 15.9zM295.1 582c-32 0-62.4 9.5-88 27.4-24 16.9-42.9 40.4-54.5 67.9-11.2 26.4-14.9 54.6-10.7 81.7 4.5 29.3 17.7 55.4 39.2 77.6 0.7 0.7 1.4 1.5 2.2 2.2l2.2 2.2c22.2 21.5 48.4 34.7 77.6 39.2 27.1 4.2 55.3 0.5 81.7-10.7 27.5-11.7 51-30.5 67.9-54.5 18-25.5 27.4-55.9 27.4-88V582h-145zM737.7 925.9c-26 0-52.2-5.4-77-15.9-35.1-14.9-65.1-39-86.7-69.7-23.2-33-35.5-72.2-35.5-113.3V538h189.1c41.1 0 80.3 12.3 113.3 35.5 30.7 21.6 54.8 51.6 69.7 86.7 14.4 33.9 19.1 70.4 13.7 105.6-5.8 37.9-23.5 73-51.1 101.5l-2.7 2.7-2.7 2.7c-28.5 27.6-63.6 45.3-101.5 51.1-9.5 1.4-19 2.1-28.6 2.1zM582.5 582v145c0 32 9.5 62.4 27.4 88 16.9 24 40.4 42.8 67.9 54.5 26.4 11.2 54.6 14.9 81.7 10.7 29.3-4.5 55.4-17.7 77.6-39.2 0.7-0.7 1.5-1.4 2.2-2.2 0.7-0.7 1.4-1.5 2.2-2.2 21.5-22.2 34.7-48.4 39.2-77.6 4.2-27.1 0.5-55.3-10.7-81.7-11.7-27.5-30.5-51-54.5-67.9-25.5-18-55.9-27.4-88-27.4h-145z" p-id="4933" fill="#6f7175"></path></svg>
      <svg v-else t="1648536523341" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4932" width="24" height="24"><path d="M727.6 483.6H538.5V294.5c0-41.1 12.3-80.3 35.5-113.3 21.6-30.7 51.6-54.8 86.7-69.7 33.9-14.4 70.4-19.1 105.6-13.7 37.9 5.8 73 23.5 101.5 51.1l2.7 2.7 2.7 2.7c27.6 28.5 45.3 63.6 51.1 101.5 5.4 35.1 0.7 71.7-13.7 105.6-14.9 35.1-39 65.1-69.7 86.7-33 23.3-72.2 35.5-113.3 35.5z m-145.1-44h145.1c32 0 62.4-9.5 88-27.4 24-16.9 42.9-40.4 54.5-67.9 11.2-26.4 14.9-54.6 10.7-81.7-4.5-29.3-17.7-55.4-39.2-77.6-0.7-0.7-1.4-1.5-2.2-2.2-0.7-0.7-1.5-1.4-2.2-2.2-22.2-21.5-48.4-34.7-77.6-39.2-27.1-4.2-55.3-0.5-81.7 10.7-27.5 11.7-51 30.5-67.9 54.5-18 25.5-27.4 55.9-27.4 88l-0.1 145zM484.2 483.6H295.1c-41.1 0-80.3-12.3-113.3-35.5-30.7-21.6-54.8-51.6-69.7-86.7C97.7 327.5 93 291 98.4 255.9c5.8-37.9 23.5-73 51.1-101.5l2.7-2.7 2.7-2.7c28.5-27.6 63.6-45.3 101.5-51.1 35.1-5.4 71.7-0.7 105.6 13.7 35.1 14.9 65.1 39 86.7 69.7 23.2 33 35.5 72.2 35.5 113.3v189zM285 139.7c-7.3 0-14.6 0.6-21.8 1.7-29.3 4.5-55.4 17.7-77.6 39.2-0.7 0.7-1.5 1.4-2.2 2.2l-2.2 2.2c-21.5 22.2-34.7 48.4-39.2 77.6-4.2 27.1-0.5 55.3 10.7 81.7 11.7 27.5 30.5 51 54.5 67.9 25.5 18 55.9 27.4 88 27.4h145.1V294.5c0-32-9.5-62.4-27.4-88-16.9-24-40.4-42.9-67.9-54.5-19.5-8.1-39.9-12.3-60-12.3zM285 925.9c-9.6 0-19.1-0.7-28.5-2.2-37.9-5.8-73-23.5-101.5-51.1l-2.7-2.7-2.7-2.7c-27.6-28.5-45.3-63.6-51.1-101.5-5.4-35.1-0.7-71.7 13.7-105.6 14.9-35.1 39-65.1 69.7-86.7 33-23.2 72.2-35.5 113.3-35.5h189.1V727c0 41.1-12.3 80.3-35.5 113.3-21.7 30.7-51.7 54.9-86.8 69.7-24.8 10.5-51 15.9-77 15.9zM295.1 582c-32 0-62.4 9.5-88 27.4-24 16.9-42.9 40.4-54.5 67.9-11.2 26.4-14.9 54.6-10.7 81.7 4.5 29.3 17.7 55.4 39.2 77.6 0.7 0.7 1.4 1.5 2.2 2.2l2.2 2.2c22.2 21.5 48.4 34.7 77.6 39.2 27.1 4.2 55.3 0.5 81.7-10.7 27.5-11.7 51-30.5 67.9-54.5 18-25.5 27.4-55.9 27.4-88V582h-145zM737.7 925.9c-26 0-52.2-5.4-77-15.9-35.1-14.9-65.1-39-86.7-69.7-23.2-33-35.5-72.2-35.5-113.3V538h189.1c41.1 0 80.3 12.3 113.3 35.5 30.7 21.6 54.8 51.6 69.7 86.7 14.4 33.9 19.1 70.4 13.7 105.6-5.8 37.9-23.5 73-51.1 101.5l-2.7 2.7-2.7 2.7c-28.5 27.6-63.6 45.3-101.5 51.1-9.5 1.4-19 2.1-28.6 2.1zM582.5 582v145c0 32 9.5 62.4 27.4 88 16.9 24 40.4 42.8 67.9 54.5 26.4 11.2 54.6 14.9 81.7 10.7 29.3-4.5 55.4-17.7 77.6-39.2 0.7-0.7 1.5-1.4 2.2-2.2 0.7-0.7 1.4-1.5 2.2-2.2 21.5-22.2 34.7-48.4 39.2-77.6 4.2-27.1 0.5-55.3-10.7-81.7-11.7-27.5-30.5-51-54.5-67.9-25.5-18-55.9-27.4-88-27.4h-145z" p-id="4933" fill="#4772fa"></path></svg>
    </li>
  </ul>
</template>

<script>
import { defineComponent, reactive } from 'vue'

const state = reactive({
  menuList: ['taskList', 'calendar', 'quadrant'],
  selectedMenu: 'taskList'
})

const handleSelect = (index) => {
  state.selectedMenu = state.menuList[index]
}

export default defineComponent({
  components: {
  },

  setup () {
    return {
      state,

      handleSelect
    }
  }
})
</script>

<style lang="scss" scoped>
.user {
  margin: 16px 0 32px;
  .avatar {
    border-radius: 5px;
  }
}
.menu-list {
  margin-bottom: 20px;
}
</style>
